// import React from 'react'
import { Button, Card, List } from "antd-mobile";
import {
  UnorderedListOutline,
  PayCircleOutline,
  SetOutline,
} from "antd-mobile-icons";
import { removeToken } from "../utils/tools";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { loaduserAPI } from "../services/user";

function User() {
  const nav = useNavigate();
  const [list, setList] = useState({});
  const loaduser = async () => {
    const res = await loaduserAPI();
    console.log(res);
    setList(res.data);
  };
  useEffect(() => {
    loaduser();
  }, []);
  return (
    <div className="md">
      <div
        className="top"
        style={{
          height: "100px",
          backgroundColor: "skyblue",
          padding: "30px",
          textAlign: "center",
        }}
      >
        <Card title="个人中心">
          <img
            style={{ width: "100px", height: "100px", borderRadius: "50px" }}
            src="https://img1.baidu.com/it/u=766997422,1177780885&fm=253&fmt=auto&app=138&f=JPEG?w=563&h=500"
            alt=""
          />

          <div key={list.id}>
            <p>{list.nickName}</p>
            <span>{list.mobile}</span>
          </div>
        </Card>
      </div>
      <div className="list" style={{ marginTop: "160px" }}>
        <List>
          <List.Item
            prefix={<UnorderedListOutline />}
            onClick={() => {
              nav("/Address");
            }}
          >
            收货地址
          </List.Item>
          <List.Item
            prefix={<PayCircleOutline />}
            onClick={() => {
              nav("/xiugai");
            }}
          >
            修改个人信息
          </List.Item>
          <List.Item
            prefix={<SetOutline />}
            onClick={() => {
              nav("/repassword");
            }}
          >
            修改密码
          </List.Item>
          <List.Item
            prefix={<SetOutline />}
            onClick={() => {
              nav("/wodeguanzhu");
            }}
          >
            我的购物车
          </List.Item>
        </List>
        <Button
          color="danger"
          size="large"
          block
          onClick={() => {
            removeToken();
            nav("/login");
          }}
        >
          退出登录
        </Button>
        {/* <Modal.confirm></Modal.confirm> */}
      </div>
    </div>
  );
}

export default User;
